﻿<!DOCTYPE HTML>
<html>
<head>
    {include file="common:meta"}
    <link type="text/css" rel="stylesheet" href="/static/admin/plugin/bootstrap-fileinput/css/fileinput.css"/>
    <style>
        .layui-layer-content,.layui-layer-iframe{
            overflow:hidden
        }
    </style>
    <script src="https://cdn.bootcss.com/iScroll/5.2.0/iscroll.js"></script>
</head>
<body>
<div class="page-container">
    <div class=" float-e-margins">
        <div class="ibox-content">
            <div class="tabs-container">
                <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true">座驾列表</a>
                    </li>
                    <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">座驾添加</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class=" tab-pane active" id="tab-1">
                        <form action="" class="form-inline" id="" data-url="">
                            <div class="form-group">
                                <label class="control-label">
                                    <label class="control-label">开始时间：
                                        <input type="text" class="form-control date-search" id="start_time"
                                               placeholder="">
                                    </label>
                                </label>
                            </div>
                            <div class="form-group">
                                <label class="control-label">
                                    <label class="control-label">结束时间：
                                        <input type="text" class="form-control date-search" id="end_time"
                                               placeholder="">
                                    </label>
                                </label>
                            </div>
                            <div class="form-group">
                                <label class="control-label" for="key">请选择:</label>
                                <select id="key" class="form-control" name="key">
                                    <option value="vehicle_name">座驾名</option>
                                    <option value="type">属性</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="control-label" for="value">输入:</label>
                                <input class="form-control" id="value" type="text" name="value">
                            </div>
                            <button type="button" class="btn btn-primary" id="eventQuery">查询</button>
                            <button type="button" onclick="location.replace(location.href);" class="btn btn-success ">
                                刷新
                            </button>
                        </form>
                        <table id="tb_departments"></table>
                    </div>
                    <div class=" tab-pane" id="tab-2">
                        <div class="ibox-content">
                            <form class="form-horizontal" id="form" data-url="/VehicleAdd" enctype="multipart/form-data">

                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="vehicle_name">
                                        <span class="c-red">*</span>座驾名称：
                                    </label>
                                    <div class="col-md-2 col-sm-10">
                                        <input type="text" class="form-control" id="vehicle_name" value=""
                                               name="vehicle_name">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="price_15">
                                        <span class="c-red">*</span>15天价格(钻石)：
                                    </label>
                                    <div class="col-md-2 col-sm-10">
                                        <input type="number" class="form-control" id="price_15" name="price_15">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="price_30">
                                        <span class="c-red">*</span>30天价格(钻石)：
                                    </label>
                                    <div class="col-md-2 col-sm-10">
                                        <input type="number" class="form-control" id="price_30" name="price_30">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">
                                        <span class="c-red">*</span>类型：
                                    </label>
                                    <div class="col-md-2 col-sm-10">
                                        <div class="radio i-checks">
                                            <label><input type="radio" name="type" value="1"> <i></i> 普通</label>
                                            <label><input type="radio" name="type" value="2"> <i></i> 非卖品</label>
                                        </div>
                                    </div>
                                </div>



                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="vehicle_img">
                                        <span class="c-red">*</span>座驾展示图：
                                    </label>
                                    <div class="col-md-4 col-sm-10">
                                        <input id="vehicle_img" class="form-control" type="file" name="vehicle_img">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="vehicle_animation">
                                        <span class="c-red">*</span>座驾特效图：
                                    </label>
                                    <div class="col-md-4 col-sm-10">
                                        <input type="file" class="form-control" id="vehicle_animation" value="" name="vehicle_animation">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
                                        <button class="btn btn-primary" type="button" onclick="commonSubmit(this)">添加
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{include file="common:footer"}
<script type="text/javascript" src="/static/admin/plugin/bootstrap-fileinput/js/fileinput.js"></script>

<script type="text/javascript" src="/static/admin/plugin/bootstrap-fileinput/js/locales/zh.js"></script>



<script>

    $(document).on('ready', function(){
        displayAll($("#vehicle_img"));
        displayAll($("#vehicle_animation"));
    });
    function displayAll(obj) {
        obj.fileinput({
            language: 'zh', //设置语言

//            uploadUrl: "/GiftAdd", //上传的地址

            allowedFileExtensions: ['jpg', 'gif', 'png', 'jpeg', 'webp', 'svga'],//接收的文件后缀

            uploadAsync: false, //默认异步上传

            showUpload: false, //是否显示上传按钮

            showRemove: true, //显示移除按钮

            showPreview: true, //是否显示预览

            browseClass: "btn btn-primary", //按钮样式

            maxFileCount: 1, //表示允许同时上传的最大文件个数

            enctype: 'multipart/form-data',

            validateInitialCount: true,

            previewFileIcon: "<iclass =" + 'glyphicon glyphicon-king' + "></i>",

            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！"
        }).on("filebatchuploadsuccess", function (event, data) {
            if (data) {
                $("#img_address").val(data.response);
            }
        });
    }

    $(document).ready(function () {
        initTable();
    });

    function initTable() {
        $('#tb_departments').bootstrapTable({
            url: '/VehicleIndexData',         //请求后台的URL（*）
            dataField: "data",
            method: 'post',                      //请求方式（*）
            striped: true,                      //是否显示行间隔色
            cache: true,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            queryParams: queryParams,//传递参数（*）
            showToggle: true,
            showRefresh: true,
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            showColumns: true,                  //是否显示所有的列
            showPaginationSwitch: true,
            minimumCountColumns: 2,             //最少允许的列数
            toolbar: '#toolbar',
            columns: [
                {
                    field: 'vehicle_name',
                    title: '座驾名称'
                }, {
                    field: 'vehicle_img',
                    title: '座驾展示图',
                    formatter: function (value, row, index) {
                        return '<img  src="' + row.vehicle_img + '" class="img-responsive" width="10%">';
                    }
                    // visible: false
                }, {
                    field: 'type',
                    title: '属性',
                    formatter: function (value, row, index) {
                        if(row.type === 1) return '普通';

                        if(row.is_putaway === 1) return '非卖品（已下架）';
                        if(row.is_putaway === 0)  return '非卖品（限时上架）';
                    }
                },{
                    field: 'price_15',
                    title: '价格',
                    formatter: function (value, row, index) {
                        return '15天' + row.price_15 + '钻 30天' + row.price_30 + '钻';
                    }
                }, {
                    field: 'is_discount',
                    title: '打折力度',
                    formatter: function (value, row, index) {
                        return row.is_discount + '%';
                    },
                    editable: {
                        type: 'number',
                        title: '设置打折',
                        validate: function (v) {
                            if (!v) return '不能为空';
                        }
                    }
                }, {
                    field: 'create_time',
                    title: '创建时间',
                    sortable: true
                }, {
                    field: 'Button',
                    title: '操作',
                    events: operateEvents,
                    formatter: operateFormatter
                }],
            //保存的使用
            onEditableSave: function (field, row, oldValue, $el) {
                //可进行异步操作
                $.ajax({
                    type: "get",
                    url: "/VehicleEdit",
                    data: {
                        vehicle_id:row.vehicle_id,
                        is_discount:row.is_discount
                    },
                    dataType: 'JSON',
                    success: function (re) {
                        if (re.code === 100) {
                            layer.msg(re.msg, {icon: 1, time: 2000});
                            $('#tb_departments').bootstrapTable(('refresh'));	// 很重要的一步，刷新url！
                        } else {
                            layer.msg(re.msg, {icon: 2, time: 2000});
                        }
                    },
                    error: function () {
                        layer.msg('服务器出小差了');
                    },
                    complete: function () {

                    }

                });
            }
        });
    }

    //得到查询的参数

    function queryParams(params) {
        params.offset = params.offset / params.limit + 1;
        params.key = $('#key').val();
        params.value = $('#value').val();
        params.start_time = $('#start_time').val();
        params.end_time = $('#end_time').val();
        return params;
    }

    function operateFormatter(value, row, index) {
        if(row.type === 2) var sho = 'inline-block';
        else var sho = 'none';

        if(row.is_putaway === 1) var status = '上架';
        else var status = '下架';

        return [
            '<button type="button"  class="TableChange btn btn-danger btn-sm" style="margin-right:15px; display:'+sho+'; ">' +status  + '</button>',
            '<button type="button"  class="user-info btn btn-warning btn-sm" style="margin-right:15px;">查看使用用户</button>',
            '<button type="button"  class="add-user btn btn-warning btn-sm" style="margin-right:15px; display:'+sho+';">设置使用用户</button>'
        ].join('');
    }

    window.operateEvents = {
        'click .user-info': function (e, value, row, index) {
            layer.open({
                type: 2,
                title: ['使用者信息','font-size:18px;font-family:宋体;font-weight:700;'],
                shadeClose: true,
                shade: false,
                maxmin: true, //开启最大化最小化按钮
                //area: ['90%','70%'],
                area: ['700px','450px'],
                content:"/VehicleUser?vehicle_id=" + row.vehicle_id,

                scrollbar:true,
                success: function(layero, index) {
                    // var body = layer.getChildFrame('body', index);
                    // new IScroll(document.querySelector('body'), {
                    //     scrollX: true,
                    //     scrollY: true,
                    //     click: true
                    // });
                    // var device = layui.device();
                    // var w = '700px';
                    // console.log(device);
                    // if(device.android || device.ios || device.weixin){
                    //     w=document.body.clientWidth+"px";
                    // }
                    // layer.style(index, {
                    //     width:w,
                    //     overflow:'scroll'
                    // });
                    //layer.iframeAuto(index);
                    //var body = layer.getChildFrame('body', index);
                    //var iframeWin = top.window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                    // layer.style(index, {
                    //     // 重新居中的样式
                    //     top: (layui.$(window).height() - layui.$(layero).height()) / 2
                    // })
                    //console.log(iframeWin);
                    //console.log(body.html()) //得到iframe页的body内容
                    //body.find('input').val('Hi，我是从父页来的')
                    //layer.iframeAuto(index);
                }
            });
            //
            // layer.full(iidex);
        },
        'click .TableChange': function (e, value, row, index) {
            layer.confirm('确认修改吗',{
                title:['提示','font-size:18px;font-family:楷体;font-weight:700;'],
                btn: ['确定','取消'] //按钮
            },function(){
                $.ajax({
                    type: 'get',
                    dataType: 'json',
                    url: '/VehicleChangeStatus?vehicle_id=' + row.vehicle_id,
                    success: function (re) {
                        if (re.code === 100) {
                            layer.msg(re.msg, {icon: 1, time: 2000});
                            $('#tb_departments').bootstrapTable(('refresh'));	// 很重要的一步，刷新url！
                        }else{
                            layer.msg(re.msg,{icon: 2, time: 2000});
                        }
                    },
                    error: function (data) {
                        layer.msg('服务器出小差了');
                    }
                });
            })
        },
        'click .add-user': function (e, value, row, index) {
            layer.open({
                type: 2,
                title: ['添加使用者','font-size:18px;font-family:宋体;font-weight:700;'],
                shadeClose: true,
                shade: false,
                maxmin: true, //开启最大化最小化按钮
                area: ['600px', '400px'],
                content:"/VehicleAddUser?vehicle_id=" + row.vehicle_id,
                offset:'auto',
                scrollbar:false
            })
        }

    };

    // 搜索按钮触发事件
    $(function () {
        $("#eventQuery").click(function () {
            $('#tb_departments').bootstrapTable(('refresh'));	// 很重要的一步，刷新url！
        });

    });
</script>
</body>
</html>